import Typography from 'windicss/plugin/typography'
import { defineConfig } from 'windicss/helpers'

export default defineConfig({
	// prefixer: false, // 是否需要自动兼容平台浏览器
	prefix: 'wd:', // 类名样式前缀（防止样式污染）
	// darkMode: 'class',
	// 属性化css，默认关闭,例如<div w:bg="red-500" w:w="full" w:h="full" w:pos="relative"></div>
	// attributify: true,
	plugins: [Typography],
	// extract: {
	// 	// 扫描文件范围
	// 	include: ['src/**/*.{css,html,mpx,vue,jsx,tsx,ts}'],
	// 	// 忽略扫描文件夹
	// 	exclude: ['node_modules', '.git', 'dist'],
	// },
	// shortcuts className 不需要加前缀!!!
	shortcuts: {
		'flex-center': 'flex items-center justify-center',
		'flex-center-col': 'flex items-center justify-center flex-col',
		btn: { custom: 'py-2 px-4 font-semibold rounded-lg shadow-md' },
		'btn-green': 'text-white bg-green-500 hover:bg-green-700',
		'part-title': 'text-center relative text-28px leading-normal pb-15px text-hex-FFFFFF indent-2px' +
        ' after:(bg-white content-[""] w-45px h-1px m-auto absolute bottom-0 inset-x-0)',
		'btn-shine': 'rounded-1/2 bg-black opacity-30 hover:(opacity-100 bg-hex-a787fb)',
		'btn-bg-scale': 'rounded-full relative bg-black opacity-30 z-20 flex-center' +
			' hover:(opacity-100 bg-hex-a787fb transform scale-110)' +
			' before:(content-[""] rounded-full absolute bg-blue-600 transform scale-0 w-full h-full transition) z-0' +
			' before:hover:(transform scale-110)',
    'container-responsive': 'm-auto sm:(w-full) md:(w-full) lg:(w-full) xl:(w-full)  2xl:(w-1240px) >2xl:(w-1240px)',
	},
	theme: {
		// animationTimingFunction: null, // 动画渲染函数（不需要）
		// colors: {
		// 	primary: '#0960bd',
		// },
		/* 覆盖或新增预设值... */
		extend: {
			zIndex: {
				'-1': '-1',
			},
		},
		screens: { // 媒体查询
			sm: '576px',
			md: '768px',
			lg: '992px',
			xl: '1200px',
			'2xl': '1600px'
		}
	},
	/*
			核心插件设置，支持的所有核心插件 https://github.com/windicss/windicss/blob/main/src/interfaces.ts#L98
			1. 允许完全禁用掉那些 Windi 默认生成的工具类类，只需要设置为空数组 []
			2. 如果只想使用罗列出来的默认工具类，则设置为数组并罗列了想要使用的核心插件列表，如 ['margin', 'padding']
			3. 如果只想禁用指定核心插件，则设置为对象，切列举需要禁用的核心插件，如 { float: false }
		*/
	// corePlugins: []
})

/**
 * Used for animation when the element is displayed.
 * @param maxOutput The larger the maxOutput output, the larger the generated css volume.
 */
function createEnterPlugin(maxOutput = 6) {
	const createCss = (index: number, d = 'x') => {
		const upd = d.toUpperCase()
		return {
			[`*> .enter-${d}:nth-child(${index})`]: {
				transform: `translate${upd}(50px)`,
			},
			[`*> .-enter-${d}:nth-child(${index})`]: {
				transform: `translate${upd}(-50px)`,
			},
			[`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
				'z-index': `${10 - index}`,
				opacity: '0',
				animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
				'animation-fill-mode': 'forwards',
				'animation-delay': `${(index * 1) / 10}s`,
			},
		}
	}
	// @ts-ignore
	const handler = ({ addBase }) => {
		const addRawCss = {}
		for (let index = 1; index < maxOutput; index++) {
			Object.assign(addRawCss, {
				...createCss(index, 'x'),
				...createCss(index, 'y'),
			})
		}
		addBase({
			...addRawCss,
			[`@keyframes enter-x-animation`]: {
				to: {
					opacity: '1',
					transform: 'translateX(0)',
				},
			},
			[`@keyframes enter-y-animation`]: {
				to: {
					opacity: '1',
					transform: 'translateY(0)',
				},
			},
		})
	}
	return { handler }
}
